import { useSlots, defineComponent, getCurrentInstance, h } from 'vue'
import { vxeEmits, vxeProps } from './vxe.data'
import { useData, useRefs, useResolveComponent as rc } from './hooks/useData'
import { useColumns } from './hooks/useColumns'
import { useMethods } from './hooks/useMethods'
import { useDataSource } from './hooks/useDataSource'
import { useDragSort } from './hooks/useDragSort'
import { useRenderComponents } from './hooks/useRenderComponents'
import { useFinallyProps } from './hooks/useFinallyProps'
import { JVxeTableProps } from './types'
import './style/index.less'

export default defineComponent({
  name: 'JVxeTable',
  inheritAttrs: false,
  props: vxeProps(),
  emits: [...vxeEmits],
  setup(props: JVxeTableProps, context) {
    const instance = getCurrentInstance()
    const refs = useRefs()
    const slots = useSlots()
    const data = useData(props)
    const { methods, publicMethods, created } = useMethods(props, context, data, refs, instance)
    created()
    useColumns(props, data, methods, slots)
    useDataSource(props, data, methods, refs)
    useDragSort(props, methods)
    // 最终传入到 template 里的 props
    const finallyProps = useFinallyProps(props, data, methods)
    // 渲染子组件
    const renderComponents = useRenderComponents(props, data, methods, slots)
    return {
      ...refs,
      ...publicMethods,
      ...finallyProps,
      ...renderComponents,
      vxeDataSource: data.vxeDataSource,
    }
  },
  render() {
    return h('div', {
      style: this.$attrs.style,
    }, h(rc('a-spin'), {
      spinning: this.loading,
      wrapperClassName: this.prefixCls,
    }, {
      default: () => [
        this.renderSubPopover(),
        this.renderToolbar(),
        this.renderToolbarAfterSlot(),
        h(rc('vxe-grid'), {
          ...this.vxeProps,
          data: this.vxeDataSource,
        }, this.$slots),
        this.renderPagination(),
        this.renderDetailsModal(),
      ],
    }))
  },
})
